<template>
    <div>
        <ly-tab
            :value="selected"
            @input="changeSelected"
            :activeColor="activeColor"
            :class="tabParentClass"
        >
              <ly-tab-item
                v-for="(item, index) in tabList"
                :key="index"
                @click="tab(index)"
                :class="tabItemClass"
              >{{item.tab}}
              </ly-tab-item>
        </ly-tab>
        <div :class="conParentClass">
            <div
                v-for="(item,index) in tabList"
                v-show="selected==index"
                :class="conItemClass"
                >{{item.con}}
            </div>
        </div>
    </div>
</template>
<script>
export default{
    props:{
            tabList:{
                type:Array
            },
            activeColor:{
                type:String,
                default:'#3d7fd5'
            },
            tabParentClass:{
                type:String,
                default:''
            },
            tabItemClass:{
                type:String,
                default:''
            },
            conParentClass:{
                type:String,
                default:''
            },
            conItemClass:{
                type:String,
                default:''
            }
        },
    data(){
        return{
            selected: 0
        }
    },
    methods: {
        changeSelected (id) {
          this.selected = id
        }
      }
}
</script>
